/**
 * 用户设置
 * 
 * @author Gill Gong
 */

import React from "react"
import { 
  SafeAreaView, 
  StyleSheet, 
  ScrollView,
  TextInput,
  Button,
  View, 
  Text, 
  Image
} from "react-native"
import store from "~/common/store"
import Icon from "~/common/font-set/index"
import CheckBoxGroup from "~/components/checkbox-group"


let onSignOut = ()=>{

  store.clearToken().then(()=>{

    Jw.gEventBus.emit('switchToLogin')
  })
}

class AccountSetting extends React.Component {

  static navigationOptions = ({ navigation })=>{

    return {
      title: "用户设置",
      headerRight: ()=>{
        return (
          <Text style={{ marginRight: 15, fontSize: 20, color: "#fff", fontWeight: "bold" }} onPress={()=>{ onSignOut(navigation) } }>
          登出
          </Text>
        )
      }
    }
  }

  constructor(options) {

    super(options)
    this.jumpPasswordModifyBind = this.jumpPasswordModify.bind(this)
    let {
      name,
      email,
      mobile,
      password,
      gender
    } = Jw.getUser();

    this.state = {
      name,
      email,
      mobile,
      password,
      gender
    }
  }

  render() {
    let { height } = Jw.getClientWidthAndHeight()
    let headerHeight = Jw.getHeaderHeight()

    height = height - 200 - 100 - headerHeight
    return (
      <SafeAreaView>
        <View style={{ height: 130 }}>
          <Image
          resizeMode="contain"
          style={{
            marginLeft: "auto", 
            marginRight: "auto", 
            marginBottom: 20, 
            marginTop: 20, 
            height: 100 
          }}
          source={ require('~/assets/imgs/avatar.png') } />
        </View>
        <ScrollView style={{ height: height }} alwaysBounceVertical={ true }>
          <View style={ styles.inputRow }>
            <Text style={{ fontSize: 18 }}>用户名</Text>
            <TextInput
            style={[ styles.inputText ]} value={ this.state.name }
            onChangeText={ text => this.onUserNameChange(text) }>
            </TextInput>   
          </View>
          <View style={ styles.inputRow }>
            <Text style={{ fontSize: 18 }}>密码</Text>
            <View style={{ display: "flex", flexDirection: "row" }}>
              <TextInput
              editable={ false }
              style={[ styles.inputText, { flex: 1 } ]} value="******">
              </TextInput>   
              <Icon style={{ 
                width: 40, 
                lineHeight: 35, 
                textAlign: "center", 
                borderBottomColor: "#666", 
                borderBottomWidth: 1
              }}
              onPress={ this.jumpPasswordModifyBind }
              name="edit" 
              size={ 25 } 
              />
            </View>
          </View>
          <View style={ styles.inputRow }>
            <Text style={{ fontSize: 18 }}>邮件</Text>
            <TextInput
            style={[ styles.inputText ]} value={ this.state.email }
            onChangeText={text => this.onEmailChange(text)}>
            </TextInput>   
          </View>
          <View style={ styles.inputRow }>
            <Text style={{ fontSize: 18 }}>电话</Text>
            <TextInput
            style={[ styles.inputText ]} value={ this.state.mobile }
            onChangeText={text => this.onMobileChange(text)}>
            </TextInput>   
          </View>
          <View style={[ styles.inputRow ]}>
            <Text style={{ fontSize: 18, marginBottom: 20 }}>性别</Text>
            <CheckBoxGroup
            onSelectionHandler={ (gender)=>{ this.onGenderChange(gender) }}
            value={ this.state.gender } 
            items={ [{display: '男', value: true},{display: '女', value: false}] } />
          </View>
        </ScrollView>
        <View style={{ paddingTop: 20, paddingLeft: 30, paddingRight: 30 }}>
          <Button title="确认" onPress={ this.onConfirm.bind(this) }/>
        </View>
      </SafeAreaView>
    )
  }

  jumpPasswordModify() {

    this.props.navigation.push('PasswordModify')
  }

  onUserNameChange() {

  }

  onPasswordChange() {

  }

  onEmailChange() {

  }

  onMobileChange() {

  }

  onGenderChange(genderStatus) {
    //console.log( genderStatus.value )
    this.setState({ gender: genderStatus.value })
  }

  onConfirm() {

  }
}

const styles = StyleSheet.create({
  inputRow: {
    paddingTop: 5,
    paddingBottom: 10,
    paddingLeft: 30,
    paddingRight: 30
  }, 
  inputText: {
    marginTop: 0,
    height: 40,
    borderBottomWidth: 1,
    borderBottomColor: "#666",
  }
})


export default AccountSetting
